<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html;charset=UTF-8"%>

<script type="text/javascript">
	// URL to call ajax
	var USER_LIST_URL    = "<s:url value='/searchUserAjax_SearchUser'/>";

	// Action formatter
	function actionFormatter(value,row,index){
		var s = '<a href="#" onclick="viewBills(this)">View Bills</a> ';
		return s;
	}
	
	function onLoadSuccess(data) {
	}

	function updateActions(index){
		$('#dg').datagrid('updateRow',{
			index: index,
			row:{}
		});
	}
	function getRowIndex(target){
		var tr = $(target).closest('tr.datagrid-row');
		return parseInt(tr.attr('datagrid-row-index'));
	}
	function editrow(target){
		$('#dg').datagrid('beginEdit', getRowIndex(target));
	}
	function deleterow(target){
		$.messager.confirm('Confirm','Are you sure?',function(r){
			if (r){

			}
		});
	}
	function viewBills(target){
		var index = getRowIndex(target);
		$('#dg').datagrid('endEdit', getRowIndex(target));
		var row = $('#dg').datagrid('getRows')[index];
		var userId = row.userId;
		$("#reportDownload_userId").val(userId);
		$("#reportDownload").submit();
	}
	function cancelrow(target){
		$('#dg').datagrid('cancelEdit', getRowIndex(target));
	}

	
</script>

<form id="reportDownload"  method="post" action='<s:url action="/reportDownload"/>' >
	<s:hidden id="reportDownload_userId" name="userInfo.userId"/>
</form>

<h2>List Users</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
	</div>
	<div style="margin:10px 0;"></div>
	
	<table id="dg" class="easyui-datagrid" style="width:598px;height:auto"
			data-options="
				singleSelect: true,
				url: USER_LIST_URL,
				loadFilter: function(data) {
					if (data.userInfoList !== null && data.userInfoList !== undefined) {
						return {rows: data.userInfoList, total: data.userInfoList.length}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post',
				onLoadSuccess: onLoadSuccess,
				onBeforeEdit:function(index,row){
					row.editing = true;
					updateActions(index);
				},
				onAfterEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				},
				onCancelEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				}
			">
		<thead>
			<tr>
				<th data-options="field:'userId',width:80">User Id</th>
				<th data-options="field:'email',width:200">Email</th>
				<th data-options="field:'createdDate',width:200">Joined Date</th>
				<th data-options="field:'action',width:110,align:'center',formatter:actionFormatter">Action</th>
			</tr>
		</thead>
	</table>
